import React from 'react';
import ReactDOM from 'react-dom';
import QueueAnim from 'rc-queue-anim';
import { Button } from 'antd-mobile';

import { isParent } from '../../../utils/crmUtils';
/**
 * position: 'left' | 'right'
 * clickTaskClose: boolean
 * title: string
 */

import './index.sass';

class Drawer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.visible
    };
  }
  _container = null;
  _content = null;
  addModalContainer() {
    if (this._container === null) {
      this._container = document.createElement('div');
      this._container.className = 'crm-mobile-drawer-container';
      document.body.appendChild(this._container);
    }
  }

  renderContent = () => {
    ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      <QueueAnim>
        <Content
          nodeRef={ref => (this._content = ref)}
          key={1}
          title={this.props.title}
          rightContent={this.props.rightContent}
          cancel={() => {
            this.removeModal();
          }}
          onOk={() => {
            try {
              this.props.onOk && this.props.onOk();
            } catch (error) {
              console.log(error);
            }
            this.removeModal();
          }}
          onReset = {() => {
            try {
              this.props.onReset && this.props.onReset();
            } catch (error) {
              console.log(error);
            }
            this.removeModal();
          }} 
          className={this.props.className}
          position={this.props.position}
        >
          {this.props.children}
        </Content>
      </QueueAnim>,
      this._container
    );
  };

  removeModal() {
    if (this.state.visible !== undefined && this.props.onCannel) {
      this.props.onCannel();
    }
    this.removeTaskClose();
    this._container.style.display='none';
    // ReactDOM.unmountComponentAtNode(this._container);
    // document.body.removeChild(this._container);
    // this._container = null;
  }
  showModal() {
    if (this._container) {
      const { visible } = this.state;
      // console.log('renderContent', visible)
      if (visible) {
        this.renderContent();
      } else if (!visible) {
        // this.removeModal();
      }
    }
  }

  taskCloseContainer = e => {
    // console.log(e.target, this._content, isParent(e.target, this._content));
    if (!isParent(e.target, this._content)) {
      this.removeModal();
    }
  };

  removeTaskClose() {
    this._container.removeEventListener('click', this.taskCloseContainer);
  }

  addTaskClose() {
    this._container.addEventListener('click', this.taskCloseContainer);
  }

  componentWillReceiveProps(nextProps) {
    // console.log('2',nextProps.visible, nextProps.clickTaskClose);
    if (nextProps.visible) {
      if(this._container){
        this._container.style.display='block';
      }else{
        this.addModalContainer();
        this.renderContent();
      }
    }
    if (nextProps.visible && nextProps.clickTaskClose) {
      this.addTaskClose();
    }
    this.setState({
      visible: nextProps.visible
    });
  }

  componentDidUpdate() {}

  componentDidMount() {
    if (this.props.visible) {
      this.addModalContainer();
      this.showModal();
    }
    if (this.props.visible && this.props.clickTaskClose) {
      this.addTaskClose();
    }
    // this.renderContent();
  }
  render() {
    return null;
  }
}

class Content extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { position, className } = this.props;
    return (
      <div
        ref={node => this.props.nodeRef(node)}
        className={`crm-mobile-drawer-content ${className || ''}`}
        style={{
          left: position === 'right' ? '1.6rem' : 0,
          right: position === 'right' ? 0 : '1.6rem'
        }}
      >
        <div className="crm-mobile-drawer-content-header">{this.props.title}</div>
        <div className="crm-mobile-drawer-content-center">{this.props.children}</div>
        <div className="crm-mobile-drawer-content-footer">
          <div style={{ padding: '0 0.1rem' }}>
            <Button onClick={this.props.onReset} style={{ width: '100%' }}>重置</Button>
          </div>
          <div style={{ padding: '0 0.1rem' }}>
            <Button onClick={this.props.onOk} type="primary" style={{ width: '100%' }}>
              确定
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default Drawer;
